import React, { Component } from 'react';
import Head from 'views/component/head/head';
import Footer from 'views/footer/footer';
import api from 'js/api/index';
import { Picker } from 'antd-mobile';
import { hashHistory } from 'react-router';
import userData from 'js/core/userData';
import './my.scss';
import { i18n } from 'js/core/i18n';
class My extends Component {
	constructor() {
		super()
		let user = userData.get();
		this.state = {
			data: {},
			languageList: null,
			language: user.Language,
			languageId: null
		}
	}
	componentDidMount() {
		api('/User/getUserbyToken').then((data) => {
			this.setState({ data: data.data[0] })
		});
		api('/Language/getlanguagelist').then((data) => {
			let user = userData.get(), language;
			let languageList = data.result.map(item => {
				let d = {};
				d.label = item.languageDesc;
				d.value = item.languageId;
				d.name = item.Language;
				if (user.langaugeId === item.languageId) {
					language = item.languageDesc
				}
				return d;
			})
			this.setState({ languageList: [languageList], languageId: [user.langaugeId], language: language })
		});
	}
	setlanguage = (languageId, Language) => {
		api('/Language/setlanguage', { languageId: languageId, Language: Language }, 'POST').then((res) => {
			userData.setKey('Language', Language);
			userData.setKey('langaugeId', languageId);
			window.localStorage.setItem('defaultLanguage', Language);
			i18n.setLanguage(Language);
			// window.location.reload();
			// window.location.href = window.location.href;
			console.log(window.location.href)
			window.location.replace(window.location.href.split('?')[0] + '?m=123123');
		});
	}
	onOk = (value) => {
		value = value[0];
		let data = this.state.languageList[0].find((item => item.value === value));
		this.setState({ language: data.label, languageId: [value] })
		this.setlanguage(value, data.name);
	}
	onClick = () => {
		api('/Home/LoginOut').then((data) => {
			userData.clearToken();
			hashHistory.push('/login');
		});
	}
	render() {
		let { languageList, data, languageId, language } = this.state;
		return <div id="my-box" className="flex-col">
			<div className="flex-g-1 box" >
				<div>
					<Head head={i18n.get("我的")} isShow={false} />
					<div className="my-img flex-center"><img src={require('./avator.jpg')} /></div>
					<div className="my-container">
						<div className="my-box">
							<div className="my-item flex jc-between">
								<div>{i18n.get("账号")}</div>
								<p>{data.UserName}</p>
							</div>
							<div className="my-item flex jc-between">
								<div>{i18n.get("所属角色")}</div>
								<p>{data.RoleName}</p>
							</div>
							<div className="my-item flex jc-between">
								<div>{i18n.get("语言")}</div>
								{languageList && <Picker extra={i18n.get("请选择")} okText={i18n.get("确定")} dismissText={i18n.get("取消")} value={languageId} title={i18n.get("语言")} cascade={false} data={languageList} cols={1} onOk={this.onOk}>
									<div>{language}</div>
								</Picker>}
							</div>
						</div>
					</div>

					<div className="loginout" onClick={this.onClick}>{i18n.get("退出登录")}</div>
				</div>
			</div>
		</div >;
	}
}
export default My;
